<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据包列表 - 网络抓包分析系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">
            <i class="bi bi-router"></i>
            网络抓包分析系统
        </a>
        <div class="navbar-nav ms-auto">
            <a class="nav-link" href="/">首页</a>
            <a class="nav-link active" href="packets.html">数据包</a>
            <a class="nav-link" href="statistics.html">统计分析</a>
            <a class="nav-link" href="realtime.html">实时监控</a>
            <a class="nav-link" href="topology.html">网络拓扑</a>
        </div>
    </div>
</nav>

<div class="container-wide mt-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-collection"></i>
                        数据包列表
                    </h5>
                </div>
                <div class="card-body">
                    <!-- 过滤器 -->
                    <div class="row mb-3">
                        <div class="col-md-1">
                            <select id="protocolFilter" class="form-select">
                                <option value="">所有协议</option>
                                <option value="TCP">TCP</option>
                                <option value="UDP">UDP</option>
                                <option value="HTTP">HTTP</option>
                                <option value="HTTPS">HTTPS</option>
                                <option value="DNS">DNS</option>
                                <option value="DHCP">DHCP</option>
                                <option value="FTP">FTP</option>
                                <option value="SSH">SSH</option>
                                <option value="SMTP">SMTP</option>
                                <option value="OTHER">其他</option>
                            </select>
                        </div>
                        <div class="col-md-1">
                            <input type="text" id="sourceIpFilter" class="form-control" placeholder="源IP">
                        </div>
                        <div class="col-md-1">
                            <input type="text" id="destIpFilter" class="form-control" placeholder="目标IP">
                        </div>
                        <div class="col-md-1">
                            <input type="number" id="sourcePortFilter" class="form-control" placeholder="源端口">
                        </div>
                        <div class="col-md-1">
                            <input type="number" id="destPortFilter" class="form-control" placeholder="目标端口">
                        </div>
                        <!-- 添加sessionId过滤输入框 -->
                        <div class="col-md-2">
                            <input type="search" id="sessionIdFilter" class="form-control" placeholder="会话ID">
                        </div>
                        <!-- 添加双向复选框 -->
                        <div class="col-md-1">
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" id="bidirectionalFilter">
                                <label class="form-check-label" for="bidirectionalFilter">双向</label>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <button id="searchBtn" class="btn btn-primary w-100">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                        </div>
                        <div class="col-md-1">
                            <button id="clearBtn" class="btn btn-text w-100">
                                <i class="bi bi-trash"></i> 清空
                            </button>
                        </div>
                        <div class="col-md-1">
                            <button id="importBtn" class="btn btn-text-primary w-100">
                                <i class="bi bi-upload"></i> 导入
                            </button>
                        </div>
                        <div class="col-md-1">
                            <button id="streamBtn" class="btn btn-text-primary w-100">
                                <i class="bi bi-diagram-3"></i> 流重组
                            </button>
                        </div>
                    </div> <!-- 关闭过滤器行的div -->

                    <!-- 数据包表格 -->
                    <div class="fixed-table">
                        <table class="table table-hover table-sm">
                            <thead class="table-dark sticky-top">
                            <tr>
                                <th>时间</th>
                                <th>协议</th>
                                <th>sessionId</th>
                                <th>源地址</th>
                                <th>目标地址</th>
                                <th>长度</th>
                                <th>信息</th>
                                <th>操作</th>
                                <th>payload</th>
                            </tr>
                            </thead>
                            <tbody id="packetTableBody">
                            <!-- 数据行将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <nav aria-label="数据包分页" class="mt-3">
                        <ul class="pagination justify-content-center" id="pagination">
                            <!-- 分页按钮将通过JavaScript动态生成 -->
                        </ul>
                    </nav>
                </div> <!-- 关闭card-body的div -->
            </div> <!-- 关闭card的div -->
        </div> <!-- 关闭col-12的div -->
    </div> <!-- 关闭row的div -->
</div> <!-- 关闭container-wide的div -->

<!-- 数据包详情模态框 -->
<div class="modal fade" id="packetDetailModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-info-circle"></i> 数据包详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
    <div class="modal-body">
        <!-- Tab导航 -->
        <ul class="nav nav-tabs" id="packetDetailTabs" role="tablist">
            <li class="nav-item" role="presentation">
            <button class="nav-link active" id="protocol-tab" data-bs-toggle="tab" data-bs-target="#protocol-pane" type="button"
                role="tab">
                <i class="bi bi-diagram-3"></i> 协议解析
            </button>
            </li>
            <li class="nav-item" role="presentation">
            <button class="nav-link" id="hex-tab" data-bs-toggle="tab" data-bs-target="#hex-pane" type="button" role="tab">
                <i class="bi bi-code-square"></i> 十六进制视图
            </button>
            </li>
            <li class="nav-item" role="presentation">
            <button class="nav-link" id="raw-tab" data-bs-toggle="tab" data-bs-target="#raw-pane" type="button" role="tab">
                <i class="bi bi-file-text"></i> 原始文本
            </button>
            </li>
            </ul>

        <!-- Tab内容 -->
        <div class="tab-content mt-3" id="packetDetailTabContent">
            <div class="tab-pane fade show active" id="protocol-pane" role="tabpanel">
            <div id="protocolContent"></div>
            </div>
            <div class="tab-pane fade" id="hex-pane" role="tabpanel">
                <div class="hex-viewer-container">
            <div id="hexContent" class="hex-viewer"></div>
            </div>
            </div>
        <div class="tab-pane fade" id="raw-pane" role="tabpanel">
            <div id="rawContent"></div>
            </div>
            </div>
            </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
    </div>
    </div>
    </div>
    </div>

<!-- 文件上传模态框 -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">导入数据包文件</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="uploadForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="pcapFile" class="form-label">选择PCAP文件</label>
                        <input class="form-control" type="file" id="pcapFile" name="file" accept=".cap,.pcap,.pcapng" required>
                        <div class="form-text">支持 .cap、.pcap 和 .pcapng 格式的文件</div>
                    </div>
                </form>
                <div id="uploadProgress" class="progress mt-3" style="display: none;">
                    <div id="uploadProgressBar" class="progress-bar" role="progressbar" style="width: 0%"></div>
                </div>
                <div id="uploadStatus" class="mt-2"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmUploadBtn">开始导入</button>
            </div>
        </div> <!-- 关闭modal-content的div -->
    </div> <!-- 关闭modal-dialog的div -->
</div> <!-- 关闭modal的div -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/common.js"></script>
<script src="js/packets.js"></script>
<style>
    .container-wide {
        max-width: 95%;
        margin: 0 auto;
    }
</style>
</body>
</html>